Step 1: Setting up to write some style

There are many ways to add styles to your HTML: inline, in the head, or as a separate .css document that we link to from the head. But today, we’ll be using styles in the head element of our html page so we don’t have to worry about handling multiple files.

selector {
    property: value;
}

Step 2: Adding Colours

Let’s add some colour with the color property! It’s color without the u. Yes we think it’s confusing too. It’s because it’s using the American spelling of the word, despite the fact that CSS was invented by a Norwegian person. You’ll get used to it soon enough, just don’t forget the English spelling in your English lessons!

Let’s change the h1 to be red instead of black.

h1 {
    color: red;
}

Step 3: Colouring specific elements

What if we wanted to make the word ‘orange’ in ‘his fur is orange’ orange? Not the whole paragraph, just that word.

One way of doing that is putting <span> tags around the word, like so:

<span>orange</span>

Then in the head, we can style the span.

span {
    color: orange;
}

Step 4: Background

We can add colours to the background too, not just text. For instance:

body {
    background-color: #D2FAFC;
}

This will make the entire background light blue. You can choose any colour you like from a list at www.colourpicker.com which generates the number you need which you can copy and paste into your code.

Now try:

h1 {
    background-color: black;
}

Since we already had a h1 declaration in there, we could just put in the background-color with the color, no need to write it all out again.

h1 {
    background-color: black;
    color: red;
}

h1 {
    background-color: black;
    color: red;
    font-size: 72px;
}

Step 6. Centering text (and images) horizontally

All our text is all the way over on the left. We can change that using text-align:center (it also takes ‘right’, ‘left’ is the default).

• We want all our text to be centered for this particular webpage, so we can write: Note the American spelling of the word centre is center.

body {
    background-color: #F8FAF4;
    text-align: center;
}

Did you notice that everything in the page went to the centre when we put ‘text-align: center’ in the body section? That’s because everything inside the body element inherits the style. This happens whenever one element is inside another, like here:

<p>Have you seen Felix? <em>Please</em> contact his owner</p>

The ‘Please’ will have the style of the <p> element with the style of the <em> element added on. This is why the stylesheets are called cascading - the styles cascade from elements into all the ones inside them. Be careful, though, because some styles are not inherited. We will find out about these later.